<template>
  <view class="container">
    <!-- 头部区域 -->
    <view class="header">
      <view class="header-date">
        <view class="date-nav">
          <text class="nav-icon" @click="prevMonth"><</text>
          <text class="nav-text">{{ currentYear }}年{{ currentMonth + 1 }}月</text>
          <text class="nav-icon" @click="nextMonth">></text>
		  <text class="back-today" @click="backToToday">回到今天</text>
        </view>
      </view>
    </view>

    <!-- 日历主体 -->
    <view class="calendar">
      <view class="weekdays">
        <view>日</view>
        <view>一</view>
        <view>二</view>
        <view>三</view>
        <view>四</view>
        <view>五</view>
        <view>六</view>
      </view>
      <view class="days">
        <view 
          v-for="(day, index) in calendarDays" 
          :key="index" 
          class="day" 
          :class="[day.classes]"
        >
          <view class="solar">{{ day.solar }}</view>
          <view class="lunar">{{ day.lunar }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentYear: 2022,
      currentMonth: 3, // 0表示1月，3表示4月
      calendarDays: []
    };
  },
  mounted() {
    this.renderCalendar(new Date(2022, 3, 1));
  },
  methods: {
    renderCalendar(date) {
      const year = date.getFullYear();
      const month = date.getMonth();
      this.currentYear = year;
      this.currentMonth = month;

      const firstDay = new Date(year, month, 1);
      const lastDay = new Date(year, month + 1, 0);
      const firstDayIndex = firstDay.getDay();
      const daysInMonth = lastDay.getDate();
      const prevMonthDays = firstDayIndex;
      const nextMonthDays = 42 - (prevMonthDays + daysInMonth);

      this.calendarDays = [];

      // 添加上月日期
      const prevMonthLastDay = new Date(year, month, 0).getDate();
      for (let i = prevMonthLastDay - prevMonthDays + 1; i <= prevMonthLastDay; i++) {
        this.calendarDays.push({
          solar: i,
          lunar: this.getLunar(i),
          classes: 'other-month'
        });
      }

      // 添加当月日期
      const today = new Date();
      for (let i = 1; i <= daysInMonth; i++) {
        const isToday = (
          i === today.getDate() &&
          month === today.getMonth() &&
          year === today.getFullYear()
        );
        this.calendarDays.push({
          solar: i,
          lunar: this.getLunar(i),
          classes: isToday ? 'today' : ''
        });
      }

      // 添加下月日期
      for (let i = 1; i <= nextMonthDays; i++) {
        this.calendarDays.push({
          solar: i,
          lunar: this.getLunar(i),
          classes: 'other-month'
        });
      }
    },

    getLunar(day) {
      const lunarMap = ['初一','初二','初三','初四','初五','初六','初七','初八','初九','初十',
                        '十一','十二','十三','十四','十五','十六','十七','十八','十九','二十',
                        '廿一','廿二','廿三','廿四','廿五','廿六','廿七','廿八','廿九','三十'];
      return lunarMap[(day - 1) % 30];
    },

    backToToday() {
      this.renderCalendar(new Date());
    },

    prevMonth() {
      const newDate = new Date(this.currentYear, this.currentMonth - 1, 1);
      this.renderCalendar(newDate);
    },

    nextMonth() {
      const newDate = new Date(this.currentYear, this.currentMonth + 1, 1);
      this.renderCalendar(newDate);
    }
  }
};
</script>

<style>
.container {
  width: 100%;
  height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.header {
  background: #fff;
  color: #555;
  padding: 16rpx 24rpx;
}
.header-date {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.date-nav {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}
.nav-icon {
  font-size: 24rpx;
  margin: 0 16rpx;
}
.nav-text {
  font-size: 28rpx;
}
.back-today {
  font-size: 24rpx;
  background: rgba(255,255,255,0.3);
  padding: 6rpx 20rpx;
  border-radius: 20rpx;
}

.calendar {
  flex: 1;
  padding: 24rpx;
  overflow: auto;
}
.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 24rpx;
  color: #555;
  margin-bottom: 12rpx;
}
.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12rpx;
}
.day {
  height: 100rpx;
  background: #f5f5f5;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8rpx;
}
.solar {
  font-size: 28rpx;
  font-weight: 500;
  text-align: center;
}
.lunar {
  font-size: 20rpx;
  color: #888;
  text-align: center;
}
.other-month {
  color: #ccc;
  background: #f9f9f9;
}
.today {
  background: #007AFF;
  color: #fff;
}
.today .lunar {
  color: rgba(255,255,255,0.8);
}
</style>